<template>
	<!-- 注册 -->
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center">
				<view @click="$tool.goBack()" class="f0 p-3">
					<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<view class="flex align-end justify-between px-5 pt-3">
				<view class="title1 A-Bold">
					{{i18n.l003}}
				</view>
				<!-- <view @click="$tool.goBack()" class="changeBtn clickCss A-Medium"
					:class="model=='light'?'changeBtnLight':''">
					{{i18n.l002}}
				</view> -->
			</view>
			<view class="title2 pl-5 mb-5 A-Bold" :class="model=='light'?'title2Light':''">
				{{i18n.l005}}
			</view>
			<view class="tabList px-5 flex align-center">
				<view @click="changeTabId(1)"
					:class="['tabItem A-Bold mr-6',tabId==1?model=='light'?'tabItem2Light':'tabItem2':'']">
					{{i18n.l006}}
					<view v-if="tabId==1" class="bar">

					</view>
				</view>
				<view @click="changeTabId(2)"
					:class="['tabItem A-Bold mr-6',tabId==2?model=='light'?'tabItem2Light':'tabItem2':'']">
					{{i18n.l007}}
					<view v-if="tabId==2" class="bar">

					</view>
				</view>
				<!-- <view @click="changeTabId(3)"
					:class="['tabItem A-Bold mr-6',tabId==3?model=='light'?'tabItem2Light':'tabItem2':'']">
					{{i18n.l008}}
					<view v-if="tabId==3" class="bar">

					</view>
				</view> -->
			</view>
		</view>
		<view class="formWrap px-5 A-Regular">
			<!-- 账号 -->
			<view class="formTitle">
				{{tabId==1?i18n.l009:i18n.l007}}
			</view>
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<view v-if="tabId==1" class="flex align-center">
					<view class="area" :class="model=='light'?'areaLight':''">
						+86
					</view>
					<view class="f0">
						<image class="img1" :src="'/static/images/downArrow_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<input type="text" v-model="account" :placeholder="tabId==1?i18n.l011:i18n.l012"
					class="flex-1 inputText A-Medium" :class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium'+' '+model=='light'?'placeholderClassLight':''">
			</view>
			<!-- 验证码 -->
			<view class="formTitle">
				{{i18n.l013}}
			</view>
			<view class="inputWrap px-3 flex align-center" :class="model=='light'?'inputWrapLight':''">
				<input type="text" v-model="code" :placeholder="i18n.l014" class="flex-1 inputText A-Medium"
					:class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium'+' '+model=='light'?'placeholderClassLight':''">
				<view @click="sendCode" class="codeText A-Medium pl-3">
					{{codeText!=60?codeText+'s':i18n.l015}}
				</view>
			</view>
			<!-- 密码 -->
			<view class="formTitle">
				{{i18n.l016}}
			</view>
			<view class="inputWrap px-3 flex align-center mb-0" :class="model=='light'?'inputWrapLight':''">
				<input style="border: none;background: unset;" :type="showPass?'text':'password'" v-model="password" :placeholder="i18n.l017"
					class="flex-1 inputText A-Medium" :class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium'+' '+model=='light'?'placeholderClassLight':''">
				<view @click="showPass=!showPass" class="f0 pl-3">
					<image v-if="showPass" class="img2" :src="'/static/images/hiddenPass_'+model+'.png'" mode="">
					</image>
					<image v-else class="img2" :src="'/static/images/showPass_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<view class="passDesc">
				<image :src="'/static/images/desc_'+model+'.png'" mode=""></image>
				{{i18n.l023}}
			</view>
			<!-- 邀请码 -->
			<view @click="showInviteCode=!showInviteCode" class="flex align-center inviteCode">
				<view class="formTitle mb-0">
					{{i18n.l021}}
				</view>
				<view class="f0">
					<image class="img3" :src="'/static/images/downArrow_'+model+'.png'" mode=""></image>
				</view>
			</view>
			<view v-if="showInviteCode||inviteCode" class="inputWrap px-3 flex align-center mb-0"
				:class="model=='light'?'inputWrapLight':''">
				<input type="text" v-model="inviteCode" :placeholder="i18n.l022"
					class="flex-1 inputText A-Medium" :class="model=='light'?'inputTextLight':''"
					:placeholder-class="'placeholderClass A-Medium'+' '+model=='light'?'placeholderClassLight':''">
			</view>
			<view @click="isAgree=!isAgree" class="agree">
				<view class="quan">
					<view v-if="isAgree" class="dian">

					</view>
				</view>
				{{i18n.l024}}
			</view>
		</view>
		<!-- 提交按钮 -->
		<view @click="submit" class="btn mx-auto A-Medium mt-5 clickCss">
			{{i18n.l001}}
		</view>
	</view>
</template>

<script>
	import {
		getMobileVerifyCode,
		getEmailVerifyCode,
		mobileNumberRegister,
		emailRegister
	} from "@/core/api/user.js";
	export default {
		data() {
			return {
				tabId: 2, //1手机 2邮箱 3面容
				showPass: false, //是否显示密码
				account: '', //账号
				password: '', //密码
				code: '', //验证码
				codeText: 60,
				codeTimer: null,
				inviteCode: '', //邀请码
				showInviteCode: false,
				isAgree: false,
				sendFlag: false
			}
		},
		onLoad(options) {
			this.inviteCode = options.inviteCode;
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		
		computed: {
			i18n() {
				return this.$t('login');
			},
			i18n2() {
				return this.$t('showToast');
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		methods: {
			// 切换登录方式
			changeTabId(id) {
				if (this.tabId == id) return;
				if (id == 3) {
					// 面容登录
					return;
				}
				this.tabId = id;
				this.resetForm();
			},
			// 发送验证码
			sendCode() {
				if(this.sendFlag){
					return;
				}
				if(this.account===''){
					if(this.tabId==1){
						this.$tool.showToast(this.i18n2.st001);
					}else if(this.tabId==2){
						this.$tool.showToast(this.i18n2.st002);
					}
					return;
				}
				this.$tool.showLoading();
				this.sendFlag = true;
				this.sendCodeAfter();
				if(this.tabId==1){
					getMobileVerifyCode({
						phoneNumber:this.account,
					}).then(res=>{
					}).catch(err=>{
						uni.hideLoading();
					})
				}else if(this.tabId==2){
					this.$tool.showLoading();
					getEmailVerifyCode({
						email:this.account,
					}).then(res=>{
					}).catch(err=>{
						uni.hideLoading();
					})
				}
			},
			// 发送验证吗数据处理
			sendCodeAfter(){
				if(!this.codeTimer){
					this.codeTimer = setInterval(e => {
						uni.hideLoading();
						if (this.codeText == 0) {
							this.codeText = 60;
							clearInterval(this.codeTimer);
							this.codeTimer = null;
							this.sendFlag = false
							return;
						}
						this.codeText--;
					}, 1000)
				}
			},
			// 注册
			submit() {
				if(!this.isAgree){
					this.$tool.showToast(this.i18n2.st009);
					return;
				}
				if(this.account===''){
					if(this.tabId==1){
						this.$tool.showToast(this.i18n2.st001);
					}else if(this.tabId==2){
						this.$tool.showToast(this.i18n2.st002);
					}
					return;
				}
				if(this.code===''){
					this.$tool.showToast(this.i18n2.st003);
					return;
				}
				if(this.password===''){
					this.$tool.showToast(this.i18n2.st004);
					return;
				}
				this.$tool.showLoading();
				let data = {
					superInviteCode:this.inviteCode,
					password:this.password,
					verifyCode:this.code,
				}
				if(this.tabId==1){
					data.mobileNumber = this.account;
					mobileNumberRegister(data).then(res=>{
						this.submitAfter();
					}).catch(err=>{
						uni.hideLoading();
					})
				}else if(this.tabId==2){
					data.email = this.account;
					emailRegister(data).then(res=>{
						this.submitAfter();
					}).catch(err=>{
						uni.hideLoading();
					})
				}
			},
			// 注册数据处理
			submitAfter(){
				uni.hideLoading();
				uni.showModal({
					title:'注册成功',
					showCancel:false,
					confirmText:'立即下载',
					success:res=>{
						window.open('https://nqely.gmdtunrw.com/api/c/rhsv4w8o');
						// 
					}
				})
				// this.$tool.showToast(this.i18n2.st005);
				// setTimeout(res=>{
				// 	this.$tool.goBack();
				// },800)
			},
			// 重置表单数据
			resetForm() {
				this.showPass = false;
				this.account = '';
				this.password = '';
				this.code = '';
			}
		}
	}
</script>

<style scoped lang="scss">
	.changeBtn {
		padding: 12rpx 43rpx;
		background: #1F2128;
		border-radius: 12rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}

	.changeBtnLight {
		background: #FFFFFF;
		color: #47474A;
	}

	.title1 {
		font-size: 40rpx;
		color: #5951BA;
	}

	.title2 {
		padding-top: 6rpx;
		font-size: 40rpx;
		color: #F7F7F7;
	}

	.title2Light {
		color: #0E0F11;
	}

	.tabList {
		margin-top: 72rpx;
		margin-bottom: 72rpx;
		font-size: 32rpx;

		.tabItem {
			color: #7F838D;
			position: relative;

			.bar {
				width: 70rpx;
				height: 6rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				background: linear-gradient(90deg, #5951BA 35%, rgba(89, 81, 186, 0) 100%);
			}
		}

		.tabItem2 {
			color: #F7F7F7;
		}

		.tabItem2Light {
			color: #0E0F11;
		}
	}

	.formWrap {
		.inviteCode {
			margin-bottom: 22rpx;

			.img3 {
				width: 15rpx;
				height: 11rpx;
			}
		}

		.formTitle {
			font-size: 28rpx;
			color: #7F838D;
			margin-bottom: 22rpx;
		}

		.inputWrap {
			width: 650rpx;
			height: 88rpx;
			background: #16181C;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-bottom: 35rpx;

			.area {
				font-size: 28rpx;
				color: #AAACB8;
			}

			.areaLight {
				color: #7F838D;
			}
			.inputText {
				font-size: 28rpx;
				color: #F7F7F7;
				// text-align: right;
			}
			
			.inputTextLight {
				color: #0E0F11;
			}
			.placeholderClass {
				font-size: 28rpx;
				color: #7F838D;
			}

			.placeholderClassLight {
				color: #B5B7BF;
			}

			.img1 {
				width: 15rpx;
				height: 11rpx;
				margin-left: 16rpx;
				margin-right: 42rpx;
			}

			.img2 {
				width: 40rpx;
				height: 40rpx;
			}

			.codeText {
				font-size: 28rpx;
				color: #5951BA;
			}
		}

		.inputWrapLight {
			background: #FFFFFF;
		}

		.mb-0 {
			margin-bottom: 0;
		}

		.forgetPass {
			font-size: 28rpx;
			color: #5951BA;
		}

		.passDesc {
			margin-top: 24rpx;
			margin-bottom: 38rpx;

			image {
				width: 28rpx;
				height: 28rpx;
				vertical-align: bottom;
				margin-right: 7rpx;
			}

			line-height: 28rpx;
			font-size: 24rpx;
			color: #5951BA;
		}

		.agree {
			margin-top: 50rpx;
			margin-bottom: 38rpx;
			line-height: 28rpx;
			font-size: 24rpx;
			color: #5951BA;

			.quan {
				display: inline-block;
				width: 20rpx;
				height: 20rpx;
				margin-right: 10rpx;
				border-radius: 10rpx;
				border: 2rpx solid #7F838D;
				overflow: hidden;

				.dian {
					width: 12rpx;
					height: 12rpx;
					border-radius: 5rpx;
					background: #5951BA;
					margin-left: 3rpx;
					margin-top: 3rpx;
				}
			}
		}
	}

	.btn {
		width: 650rpx;
		height: 80rpx;
		background: #5951BA;
		border-radius: 74rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #F7F7F7;
	}
</style>